<template>
  <px-scrollbar v-show="isView" class="view-equip-detail">
    <div class="view-task-detail">
      <div class="view-task-title">
        <px-button type="primary" icon="ArrowLeft" @click="emits('backMainPage')">返回</px-button>
        <div class="text">{{ planData.name }}</div>
      </div>
    </div>
    <div class="view-equip-title">基本信息</div>
    <div class="view-equip-wrap">
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">保养计划编码</div>
          <div class="text">{{ planData.code }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">保养计划名称</div>
          <div class="text">{{ planData.name }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">保养开始时间</div>
          <div class="text">{{ planData.startDate }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">所处地块</div>
          <div class="text">{{ planData.facName }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">保养负责人</div>
          <div class="text">{{ planData.userName }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">计划创建时间</div>
          <div class="text">{{ planData.createTime }}</div>
        </div>
      </div>
    </div>
    <div class="view-equip-title">保养设备</div>
    <px-table :data="selectEqpData" style="margin: 20px 0" class="equip-table" size="small" max-height="340px" border>
      <px-table-column type="index" label="序号" min-width="56" />
      <px-table-column prop="typeName" label="设备类型" min-width="200" show-overflow-tooltip />
      <px-table-column prop="eqpId" label="设备编号" min-width="200" show-overflow-tooltip />
      <px-table-column prop="eqpName" label="设备名称" min-width="200" show-overflow-tooltip />
      <!-- <px-table-column prop="facName" label="地块" min-width="120" show-overflow-tooltip /> -->
      <px-table-column prop="positionNameAll" label="安装位置" min-width="200" show-overflow-tooltip />
      <px-table-column prop="specification" label="规格型号" min-width="200" show-overflow-tooltip />
    </px-table>
    <div class="view-equip-title">保养项目</div>
    <px-table :data="selectItemsData" style="margin: 20px 0" class="equip-table" size="small" max-height="340px" border>
      <px-table-column type="index" label="序号" min-width="56" />
      <px-table-column prop="name" label="保养项目名称" min-width="240" show-overflow-tooltip />
      <px-table-column prop="standard" label="保养标准" min-width="666" show-overflow-tooltip>
        <template #default="scope">
          <span v-for="(item, index) in scope.row.attachmentList" :key="item.id">
            {{ item.originalName }}{{ scope.row.attachmentList?.length > 1 && index !== scope.row.attachmentList?.length - 1 ? "，" : "" }}
          </span>
        </template>
      </px-table-column>
      <px-table-column prop="confirmWayName" label="确认方式" min-width="150" show-overflow-tooltip />
      <px-table-column prop="createByName" label="创建人" min-width="150" show-overflow-tooltip />
      <px-table-column prop="createTime" label="创建时间" min-width="200" show-overflow-tooltip />
    </px-table>
  </px-scrollbar>
</template>

<script setup lang="ts">
import { queryPlanEqp, queryPlanItems } from "@/api/erc/epm";
import { computed, ref, watchEffect } from "vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage"]);

const props = defineProps(["planData", "isView"]);

// 显示隐藏
const isView = computed(() => props.isView);

const selectEqpData = ref([]);
const selectItemsData = ref([]);

const getEqpItems = async () => {
  selectEqpData.value = await queryPlanEqp({ code: props.planData.code });
  selectItemsData.value = await queryPlanItems({ code: props.planData.code });
};

watchEffect(() => {
  if (isView.value) {
    getEqpItems();
  }
});
</script>

<style lang="scss" scoped>
@import url("@/views/erc/scss/view-detail.scss");

.view-equip-detail {
  padding: 20px;
}

.view-task-title {
  // width: 25%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;

  .text {
    margin-right: 8px;
    margin-left: 16px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: rgb(0 0 0 / 90%);
  }
}
</style>
